<template>
  <div>
    <li>
      <slot name="pre-icon" :value="value"></slot>
      <span v-if="del" style="text-decoration: line-through" class="red">{{ title }}</span>
      <span v-else>{{ title }}</span>
      <button v-show="!del" v-on:click.stop="handleClick">Del</button>
      <slot name="suf-icon"></slot>
    </li>
  </div>
</template>

<script>
export default {
  name: 'TodoList',
  props: {
    title: String,
    del: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: Math.random()
    }
  },
  methods: {
    handleClick: function () {
      this.$emit('del', this.title)
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.red {
  color: red;
}
</style>
